<script setup>
import { ref, reactive, toRefs, computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
import Table from '@/components/Table/index.vue';
import ComponentColumn from '@/components/ComponentColumn/index.vue';
import ActionButton from './ActionButton.vue';
import Pagination from '@/components/Pagination/index.vue';
import { getQueryPageList } from '@/server/api/biz.js';

const total = ref(20);
const props = defineProps({
  bomData: {
    type: Array,
    default: [],
  },
  fileId: {
    type: String,
  },
});
const emit = defineEmits([
  'getAlldata',
  'getStatisticalData',
  'getPrivateTotal',
  'openModal',
  'getTableData',
]);

const columns = computed(() => [
  {
    label: t('om.BOMModel'),
    prop: 'manufacturerPn',
    width: '152px',
  },
  {
    label: t('om.BOMBit'),
    prop: 'designator',
    width: '120px',
  },
  {
    label: t('om.Branding'),
    prop: 'manufacturer',
    width: '100px',
  },
  {
    label: t('om.Componentparameters'),
    prop: 'description',
    width: '215px',
  },
  {
    label: t('om.RecommendedComponents'),
    prop: 'recommendedComponents',
    type: 'img',
    width: '215px',
  },
  {
    label: t('om.Dosage'),
    prop: 'totalQuantity',
    width: '80px',
  },
  {
    label: t('om.Currentstock'),
    prop: 'stock',
    width: '116px',
  },
  {
    label: t('smt.Operational'),
    fixed: 'right',
    type: 'btn',
  },
]);
let pagesNum = ref(1);

const updateData = () => {
  emit('getAlldata');
  emit('getStatisticalData');
  getPrivateTableData(pagesNum.value, 10);
};

const getList = (pageNum, pageSize) => {
  pagesNum.value = pageNum;
  getPrivateTableData(pageNum, pageSize);
};

const changeModel = (index, row) => {
  emit('openModal');
  console.log('---->row', row)
  changeTypeVisible.value = true;
};

let privateTableData = ref({});
/**
 * 获取私有库存表格数据
 * @param {*} current
 * @param {*} pageSize
 */
const getPrivateTableData = async (current = 1, pageSize = 10) => {
  const obj = {
    bomFileId: props.fileId,
    current: current,
    pageSize: pageSize,
    patchStatus: 1,
    similarity: '',
    status: 2,
  };

  const res = await getQueryPageList(obj);
  if (res.code == 200) {
    privateTableData.value = res.data;
    emit('getPrivateTotal', res.data.total);
    emit('getTableData', privateTableData.value);
  } else {
    ElMessage.error(res.msg);
  }
};
defineExpose({
  getPrivateTableData,
});
onMounted(() => {
  getPrivateTableData();
});
</script>
<template>
  <div class="table-wrap">
    <h2>{{ $t('om.UsingPrivateStock') }}</h2>
    <Table
      v-loading="loading"
      :data="privateTableData.records"
      :columns="columns"
      serial
      :serialOptions="{ pageNum: privateTableData.current, pageSize: privateTableData.size }"
    >
      <!-- 推荐元件 -->
      <template #imgSlot="{ scope }">
        <component-column :row="scope.row" />
      </template>
      <template #btnSlot="{ scope }">
        <ActionButton :scope="scope" @updateData="updateData" @changeModel="changeModel" />
      </template>
    </Table>
    <Pagination
      class="m-b-10"
      v-show="Number(privateTableData.total) > 0"
      :total="Number(privateTableData.total)"
      v-model:page="privateTableData.pages"
      v-model:limit="privateTableData.size"
      @pagination="getList"
    />
   
  </div>
</template>
<style lang="scss" scoped>
.table-wrap {
  padding-top: 24px;
  h2 {
    color: var(--mall-text-color-primary);
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 12px;
  }
}

.img-column {
  // 元器件
  > .image {
    width: 72px;
    height: 72px;
    margin-right: 8px;
  }
  .desc {
    color: #383838;
    font-size: 12px;
    font-weight: 400;
  }
  .link-btn {
    font-size: 12px;
  }
}
</style>
